<template>
  <div>
    <div class="list-container">
      <el-menu router
               :default-active="activeMenu"
               @select=" handleSelect">
        <el-menu-item v-for="li in commonList"
                      :key="li.id"
                      :index="li.path">
          <span slot="title">{{ li.name }}</span>
        </el-menu-item>
        <el-menu-item-group style="margin-top:10px">
          <template slot="title">我的音乐</template>
          <el-menu-item v-for="item in myList"
                        :key="item.path"
                        :index="item.path"
                        :disabled="!isLogin"
                        :route="{path:item.path,query:{id:userid,type:item.id}}">{{ item.name }}</el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </div>
    <div class="main ">
      <transition name="el-fade-in">
        <router-view></router-view>
      </transition>
      <el-backtop target=".main"
                  class="toTop"
                  :bottom="100"></el-backtop>
    </div>

  </div>

</template>

<script>
import { getUserPlaylist } from '@/api/User'
import { mapState } from 'vuex'
export default {
  name: 'List',
  data () {
    return {
      activeMenu: '/personrecom',
      list: [{ name: '发现音乐', id: 10, path: '/personrecom', type: 0 },
      { name: '视频', id: 100, path: '/mv', type: 0 },
      { name: '每日推荐', id: 101, path: '/dailyrecom', type: 1 },
      { name: '私人FM', id: 102, path: '/fm', type: 0 },
      { name: '我喜欢的音乐', id: 99, path: '/homeitem/:id', type: 1, },
      { name: '创建的歌单', id: 98, path: '/homeitem/:id', type: 2, },],
      tabIndex: 10,
      Id: '',//用户id
      userid: '',//用户歌单的第一个id
    }
  },
  computed: {
    ...mapState({
      isLogin: (state) => {
        return state.user.isLogin
      },
      id: (state) => {
        return state.user.id
      },
      // 共有菜单
      commonList () {
        return this.list.filter((item) => item.type == 0)
      },
      // 私有菜单
      myList () {
        return this.list.filter((item) => item.type == 1)
      },
      // 创建的歌单

    })
  },
  mounted () {
    // 解决因为刷新页面而导致菜单栏乱序
    if (window.sessionStorage.getItem('activeMenu')) this.activeMenu = window.sessionStorage.getItem('activeMenu')
    if (localStorage.getItem('getAcount')) {
      var getAcount = JSON.parse(localStorage.getItem('getAcount'))
      this.Id = getAcount.userId
      this.getUserPlaylist(this.Id)
    }
  },
  methods: {
    // 获取用户歌单
    async getUserPlaylist (id) {
      let res = await getUserPlaylist(id)
      this.userid = res.playlist[0].id
    },
    handleSelect (index) {
      // index 为当前页面的路由
      // 点击回调将菜单栏标识存入浏览器，防止页面刷新丢失
      window.sessionStorage.setItem('activeMenu', index)
    }
  },
  watch: {
    '$route.path': {
      immediate: true,
      handler (val) {
        this.activeMenu === val
        if (val == '/homeitem/:id') {
          this.$store.dispatch('getLikelist')
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
div {
  width: 1320px;
  height: 610px;
  .list-container {
    padding-top: 10px;
    display: block;
    float: left;
    width: 200px;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    /deep/.el-menu-item.is-active {
      background-color: #f6f6f7;
      font-weight: bold;
      color: black;
      font-size: 16px;
      width: 190px;
    }
    /deep/.el-menu-item,
    .el-submenu__title {
      margin-bottom: 5px;
      border-radius: 5px;
      height: 34px;
      line-height: 34px;
      list-style: none;
      width: 190px;
      &:hover {
        background-color: #f6f6f7;
      }
    }
  }
  .main {
    display: flex;
    width: 1336px;
    overflow: hidden;
    position: absolute;
    left: 200px;
    top: 60px;
    overflow-y: auto; //出现垂直滚动条
    .toTop {
      width: 40px;
      height: 40px;
    }
  }
  /* 隐藏滚动条 */
  .main::-webkit-scrollbar {
    display: none;
  }
}
</style>